<template>
  <div class="body-wrapper">
    <div>
      <van-card
        v-for="(item, index) in businessData"
        :key="index"
        @click="updateIndex(index)"
      >
        <template #price></template>
        <template #title></template>
        <template #desc></template>
        <template #tags></template>
        <template #thumb>
          <img class="card-thumb" :src="item.avatar" />
        </template>

        <template #num>
          <div class="card-panel-left" @click="toBusiness(index)">
            <div class="card-title_img">
              <span class="card-title">{{ item.storeName }}</span>
              <img
                class="card-title-img"
                src="/src/assets/icon/xiala-copy.svg"
              />
            </div>
          </div>
          <div class="card-panel-center">
            <span class="card-desc">好吃的饭</span>
            <div class="card-tags">
              <van-tag color="#F8CECC" text-color="#F1857E" plain
                >月售{{ item.monthSale }}</van-tag
              >
              <van-tag color="#F8CECC" text-color="#F1857E" plain
                >起送{{ item.minimumDeliveryFee }}</van-tag
              >
            </div>
          </div>
          <div class="card-panel-right">
            <div class="card-status">
              {{ orderInfo[index].orderStatus === 1 ? "已完成" : "未完成" }}
            </div>
            <div>
              <!-- <img class="card-img" src="/src/assets/icon/renminbi.svg" /> -->
              <span class="card-money">¥{{ orderInfo[index].price }}</span>
            </div>
            <span class="card-quantity">共 {{ 2 }} 件</span>
          </div>
        </template>

        <template #footer>
          <div class="card-footer">
            <van-button size="mini" @click="toBusiness(index)"
              >再来一单</van-button
            >
            <van-button size="mini">小问卷</van-button>
            <van-button size="mini">评价</van-button>
          </div>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import http from "/src/utils/http.js";
import { useRouter } from "vue-router";
//van-list组件
const nowOrderId = ref();
// 创建一个响应式变量来存储当前的index
const currentIndex = ref(-1);
// 一个方法来更新currentIndex的值
function updateIndex(i) {
  currentIndex.value = i;
  console.log("当前的数组下标为1111", i);
}
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      list.value = [];
      refreshing.value = false;
    }

    for (let i = 0; i < 10; i++) {
      list.value.push(list.value.length + 1);
    }
    loading.value = false;

    if (list.value.length >= 40) {
      finished.value = true;
    }
  }, 1000);
};
const onRefresh = () => {
  // 清空列表数据
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};

//数据请求区

const userId = localStorage.getItem("userId");
const orderInfo = ref([]);
const getOrderById = async () => {
  try {
    const response = await http.get("/order/listOrder", {
      params: {
        userId: localStorage.getItem("userId"),
      },
    });
    orderInfo.value = response.data.data;
    console.log("订单的数33", response.data.data);
  } catch (error) {
    console.error(error);
  }
};
const arrKey = ref([]); //编号
const businessData = ref([]); //商家的信息
const businessInfo = ref([]); //
const getBusinessInfo = async () => {
  try {
    const response = await http.get(`/order/getBusinessByUserId/${userId}`);
    businessInfo.value = response.data.data;

    Object.keys(businessInfo.value).forEach((key) => {
      arrKey.value.push(key);
      businessData.value.push(businessInfo.value[key]);
    });
    console.log(
      `编号: ${arrKey.value[0]}, 对象:`,
      businessData.value[0].businessId
    );
  } catch (error) {
    console.error(error);
  }
};
onMounted(() => {
  getOrderById();
  getBusinessInfo();
});
//根据当前选中的订单编号,得到对应的商家
const nowBusiness = computed(() => {});

//路由导航区
const router = useRouter();
function toBusiness(index) {
  router.push({
    path: "/business",
    query: {
      merchantId: orderInfo.value[index].businessId,
    },
  });
}
</script>




<style lang="scss" scoped>
.body-wrapper {
  width: 100vw;
  /* height: 100vh; */
  background: linear-gradient(
    to bottom,
    #fae45b 0%,
    #fbe869 3%,
    #f8ec8a 5%,
    #f7eead 7%,
    #f4f4f4 10%
  );
}

.card-thumb {
  width: 100px;
  height: 100px;
  margin-top: 8px;
}

.card-footer {
  height: 55px;
}

.card-panel-left {
  .card-title_img {
    height: 0px;

    .card-title {
      display: inline-block;
      font-size: 16px;
      color: black;
      font-weight: bold;
      margin-top: 8px;
      margin-left: -176px;
    }

    .card-title-img {
      height: 16px;
      margin-bottom: -2px;
    }
  }
}

.card-panel-center {
  height: 0px;

  .card-desc {
    display: inline-block;
    font-size: 14px;
    /* color: black; */
    /* font-weight: bold; */
    margin-top: 30px;
    margin-left: -176px;
  }

  .card-tags {
    margin-bottom: -30px;
    margin-left: -174px;
  }
}

.card-panel-right {
  .card-status {
    color: #1b1a1ad0;
    font-size: 16px;
    margin-top: 8px;
    margin-bottom: 24px;
  }

  .card-img {
    width: 20px;
    height: 20px;
    margin-top: -6px;
    margin-left: -20px;
    margin-bottom: -3px;
    margin-right: -20px;
  }

  .card-money {
    color: black;
    font-size: 20px;
    font-weight: bold;
    margin-top: -6px;
    margin-left: 15px;
  }

  .card-quantity {
    font-size: 15px;
    color: #1b1a1ad0;
    margin-top: -6px;
    margin-left: 2px;
  }
}

::v-deep(.van-tag) {
  width: auto;
  border-radius: 3px;
  margin-right: 5px;
  text-align: center;
}

::v-deep(.van-card) {
  width: 95%;
  margin-bottom: 10px;
  background-color: #ffffff;
  border-radius: 10px;
  margin-left: 10px;
  box-shadow: 0px 20px #f5f5f5;
}

::v-deep(.van-button) {
  min-width: 57px;
  height: 33px;
  margin: 20px 0px 10px 11px;
  font-size: 13px;
  font-weight: bold;
  border-radius: 6px;
  background-color: #f8e254;
}
</style>